<template>
    <!--相关新闻-->
    <article class="city-related-news-box" id="related-news">
        <div class="public-header-content">
            <div class="header clearfix">
                <i></i>相关新闻
                <router-link to="/News" class="right">更多资讯>></router-link>
            </div>
            <div class="content">
                <a-row :gutter="10" v-show="!noDataShow">
                    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in relatedNewsData" :key="index" class="li">
                        <a-card :title="null" hoverable :loading="relatedNewsListLoading">
                            <a-row :gutter="16">
                                <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="left-box">
                                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}">
                                        <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                                    </router-link>
                                </a-col>
                                <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="right-box">
                                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id }}" class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</router-link>
                                    <aside class="webkit-text-overflow-2lines">{{ isNull0(item.description) }}</aside>
                                    <p class="clearfix">
                                        <a-tooltip placement="top" title="发布时间" class="top">
                                            <i class="iconfont icon-fabushijian"></i> {{ momentFormat(item.createTime, 'YYYY-MM-DD') }}
                                        </a-tooltip>
                                    </p>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>
                </a-row>
                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                relatedNewsData: [],    //相关新闻数据
                relatedNewsListLoading: true,    //列表加载loading
                noDataShow: false,  //没有数据提示信息是否显示
            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
            // 获取相关新闻列表
            this.getRelatedNews();
        },
        methods: {
            //获取相关新闻列表
            getRelatedNews() {
                this.$get('/news/list/6/1/6').then(res => {
                    this.relatedNewsListLoading = false;
                    if (res.status == 0) {
                        this.relatedNewsData = res.list;
                        this.noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                });
            },
         },
        components: {}
    }
</script>
<style lang="less" type="text/less">
    body{
        .city-related-news-box{
            >.public-header-content{
                >.header{
                    >a{
                        float: right;
                        font-size: 14px;
                        color: #000;
                        margin: 10px 0 0 0;
                    }
                }
                >.content{
                    >.ant-row{
                        >.li{
                            padding: 15px 0;
                            .ant-card {
                                border: none;
                                > .ant-card-body {
                                    padding: 0;
                                    > .ant-row {
                                        padding: 0 10px;
                                        > .left-box {
                                            > a {
                                                > img {
                                                    width: 100%;
                                                    max-height: 120px;
                                                    cursor: pointer;
                                                }
                                            }
                                        }
                                        > .right-box {
                                            height: 140px;
                                            text-align: justify;
                                            > a {
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: #38485a;
                                                margin: 5px 0;
                                                cursor: pointer;
                                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                            }
                                            > a:hover {
                                                color: #00b8ee;
                                            }
                                            > p,
                                            > aside {
                                                font-size: 16px;
                                                margin: 10px 0;
                                                text-indent: 0;
                                            }
                                            > p {
                                                color: #999;
                                                > span {
                                                    cursor: pointer;
                                                }
                                                > span:last-of-type {
                                                    float: right;
                                                }
                                                > span:hover {
                                                    color: #00b8ee;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>